<template>
  <div>
    <van-cell size="large" :to='"/article/" +item.art_id'>

      <div slot='title' class="van-multi-ellipsis--l3"> {{item.title}} </div>
      <div class="img-right" v-if="item.cover.images.length===1">
        <van-image fit="cover" :src="item.cover.images[0]" />
      </div>
      <div slot='label'>
        <div class="imag-wrap" v-if="item.cover.type===3">
          <van-image fit="cover" v-for=" (img,index) in item.cover.images " :key="index" :src="item.cover.images[index]" />
        </div>
        <span>置顶</span>
        <span>{{item.aut_name}}</span>
        <span>{{item.comm_count}}评论</span>
        <span> {{ item.pubdate | relativeTime}} </span>
      </div>
    </van-cell>
  </div>
</template>

<script>
export default {
  name: 'articleitemIndex',
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  data() {
    return {}
  }
}
</script>

<style lang="less" scoped>
.van-cell {
  .van-image {
    width: 110px;
    height: 72px;
  }
  span:nth-child(1) {
    color: red;
  }
  span {
    margin-right: 10px;
  }
  .van-cell__title {
    font-size: 16px;
  }

  .van-cell__value {
    flex: unset;
    .img-right {
      margin-left: 10px;
    }
  }
}
.imag-wrap {
  display: flex;
  justify-content: space-evenly;
}
</style>
